<template>
  <div class="page-content">
    <a-layout class="all-content">
      <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
        <buyHeader></buyHeader>
      </a-layout-header>
      <a-layout-content style="    background: #f0f2f5;">
        <div class="content">
          <div class="center-content">
            <div class="title-box">加盟申请</div>
            <div class="center-detail-box" v-if="applyData[0]">
              <div class="content-item-box" v-for="(items,idx) in applyData" :key="items._id">
                <div class="item-tit-box">
                  <span v-if="items._required==='Y'">*</span>
                  {{idx+1}}、{{items._title}}
                </div>
                <div class="item-detail-box" :class="{'error': items.isError}">
                  <textarea cols="50" rows="5" v-model="applyData[idx]._value" @change="textareaChange(items)"></textarea>
                </div>
              </div>
            </div>
            <div class="center-detail-box" v-if="!applyData[0]">
              <div class="no-data-content">{{noDataTip}}</div>
            </div>
            <div class="center-bottom-box" v-if="applyData[0]">
              <a-button type="primary" :loading="subBtnLoading" @click="subToApplyForData()">提交加盟申请</a-button>
            </div>
          </div>

<!--          <div class="footer-box">-->
<!--            <div class="center-box">-->
<!--              ©成都珑微系统科技有限公司-->
<!--            </div>-->
<!--          </div>-->

        </div>

      </a-layout-content>
      <a-layout-footer>
        <div class="footer-box">©成都陇微系统科技有限公司</div>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
    import buyHeader from '@/components/Buy/BuyHeader.vue'
    import { getSurveyData, subSurveyData } from '@/api/common'
    export default {
        name: "ToApplyFor",
        data(){
            return{
                pageName: 'index',
                isFiexdHeader: false,
                subBtnLoading: false,
                applyData: [],
                noDataTip: ''
            }
        },
        mounted(){
            window.addEventListener('scroll',this.handleScroll,true);
            this.getToApplyForData();
        },
        components: {
            buyHeader
        },
        methods: {
            handleScroll: function (e) {
                let scrollTop = e.target.scrollTop;
                if(scrollTop>300){
                    this.isFiexdHeader = true;
                }
            },
            getToApplyForData: function () {
                getSurveyData().then(res=>{
                  let data = res && res.data.rows ? res.data.rows : [];
                  if(data && data[0]){
                      data.forEach(function (items) {
                          items._value= '';
                          items.isError = false;
                      });
                  }
                  this.applyData = data;
                }).catch(error=>{
                    if(error && error.data.code === 1){
                        this.noDataTip = '加盟申请已提交，请勿重复提交';
                        this.applyData = [];
                    }else{
                        this.noDataTip = '获取加盟申请问题失败';
                        this.$message.error("获取加盟申请问题失败")
                    }

                })
            },
            textareaChange: function (items){
                items.isError = !items._value;
            },
            isSubToApply: function (){
                let isSub = true;
                if(this.applyData && this.applyData[0]){
                    this.applyData.forEach(function (items) {
                        if(items._required === 'Y'){ //必填
                            if(!!items._value && items._value!=''){
                                items.isError = false;
                            }else{
                                items.isError = true;
                                // isSub = false;
                            }
                        }
                    });

                    for(let i = 0; i < this.applyData.length; i++){
                        let datas = this.applyData[i];
                        if(datas._required === 'Y'){ //必填
                            if(!datas._value || datas._value==''){
                                isSub = false;
                                break;
                            }
                        }
                    }
                }

                return isSub;
            },
            subToApplyForData: function () {
                if(this.isSubToApply()){
                    this.subBtnLoading = true;
                    let params = {data:[]};
                    this.applyData.forEach(function (items) {
                        params.data.push({
                            _id: items._id,
                            _answer: items._value
                        })
                    });

                    subSurveyData(params).then(res=>{
                        this.subBtnLoading = false;
                        this.$message.success("提交加盟申请成功")
                        this.getToApplyForData();
                    }).catch(error=>{
                        this.subBtnLoading = false;
                        this.$message.error("提交加盟申请失败")
                    })
                }else{
                    this.$message.warning("请将信息填写完整！")
                }
            }
        },
        destroyed(){
            window.removeEventListener('scroll',this.handleScroll,true)
        }
    }
</script>

<style lang="less" scoped>
  .page-content, .all-content{
    height: 100%;
    /deep/ .ant-layout-content{
      min-height: auto;
    }
  }
.content{
  height: 100%;
  width: 1000px;
  margin: 0 auto;
  padding-top: 65px;
  .center-content{
    background-color: #ffffff;
    margin-top: 20px;
    padding: 15px 15px 30px 15px ;
    min-height: calc(100vh - 235px);
    .title-box{
      text-align: center;
      font-size: 18px;
      padding: 30px 0;
      color: #e1251b;
    }
    .center-detail-box{
      .no-data-content{
        text-align: center;
        padding: 50px 0;
      }
      .content-item-box{
        padding-bottom: 20px;
        margin-bottom: 35px;
        border-bottom: 1px solid #dddddd;
        .item-tit-box{
          color: #000000;
          font-weight: bold;
          margin-bottom: 10px;
          span{
            color: #e1251b;
          }
        }
        .item-detail-box{
          padding-left: 28px;
          textarea{
            outline: none;
            width: 100%;
          }
          &.error textarea{
            border: 1px solid #e1251b;
          }
        }
      }
    }

    .center-bottom-box{
      text-align: center;
    }
  }
}
  .footer-box{
    margin: 0 auto;
    width: 1000px;
    padding: 50px 0;
  }
  @media (max-width: 575px){
    .content,.footer-box{
      width: 100%;
    }
  }
</style>